/* 加载 */
.bny-loading {
    border: 5px solid var(--muted-40);
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation: anim-spin .8s linear infinite;
}

.bny-loading[size="small"] {
    width: 1.5em;
    height: 1.5em;
}

.bny-loading[size="large"] {
    width: 4.5em;
    height: 4.5em;
}

@keyframes anim-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 加载2 */

.bny-loader {
    display: flex;
}

.bny-loader div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: 1.2s bny-loader ease infinite;
}

.bny-loader[size="small"] div {
    width: 10px;
    height: 10px;
}

.bny-loader[size="large"] div {
    width: 40px;
    height: 40px;
}

.bny-loader div:nth-child(1) {
    background-color: var(--primary);
}

.bny-loader div:nth-child(2) {
    background-color: var(--primary-10);
    animation-delay: 0.25s;
}

.bny-loader div:nth-child(3) {
    background-color: var(--muted);
    animation-delay: 0.5s;
}

.bny-loader div:nth-child(4) {
    background-color: var(--muted-40);
    animation-delay: 0.75s;
}

@keyframes bny-loader {
    50% {
        transform: translateY(25px);
    }
}